<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th colspan="2">xxx购物车</th>
            </tr>
        </thead>
        <tbody>
            <!-- 每一行是一个商品，每一列是一个属性 -->
            <tr>
                <td>
                    <input type="checkbox" class="check-all">
                    <label>全选</label>
                </td>
                <td>名称</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="check-item">
                </td>
                <td>苹果</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="check-item">
                </td>
                <td>桃子</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="check-item">
                </td>
                <td>葡萄</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="check-item">
                </td>
                <td>花生</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 全选分成两步——一个是全选按钮，其余所有按钮公用一个方法
        var checkAll = $('.check-all');
        var checkItem = $('.check-item');
        

        // 全选按钮的处理
        // change事件 等待输入框的值修改后再执行函数 比click更保险
        checkAll.change(function() {
            var flag = $(this).prop('checked'); // 获取当前输入框的状态，并赋值给所有商品
            $('.check-item').each(function(index, el){
                $(el).prop('checked', flag)
            })
        })

        // 单个商品的选中处理
        $.each(checkItem, function(index, el) { // 这里遍历是为了给所有的输入框绑定事件
            // 遍历所有的商品输入框 绑定事件
            $(el).change(function() {
                // every遍历数组 是一个函数 return后面是判断条件，每一项都符合条件时返回true，否则是false
                // 每当有输入框change时  都应该检查是否每一项都选中了
                var checkArr = [] // 每次都初始化一个新数字 用来盛放true false
                $.each(checkItem, function(index, el) { // 这里的遍历是为了打印每一个框的值
                    checkArr.push($(el).prop('checked')); // 将所有的勾选状态放进数组
                })
                // 这个数组中存放了勾选的状态
                // console.log(checkArr);
                // 要判断数组中是不是全都是true 来知道要不要全选
                var flag = checkArr.every(function(item) {
                    // return后面是判断条件 只有全部符合时，every才会返回true 否则是false
                    // every、some函数一定会有返回值
                    // every类似逻辑 且（&&）   some类似逻辑 或（||）
                    return item
                })
                checkAll.prop('checked', flag)
            })
        })
    </script>
</body>
</html>